<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules">
				<view class="box">
					<uni-forms-item label="WiFi名称" required name="SSID">
						<view class="picker-input" @click="chosewifi">
							{{ FormData.SSID }}
							<uni-icons type="right" size="16" color="#bbb"></uni-icons>
						</view>
					</uni-forms-item>
					<uni-forms-item label="WiFi密码" required name="password">
						<uni-easyinput type="password" v-model="FormData.password" :clearable="false" placeholder="请输入WiFi密码" />
					</uni-forms-item>
				</view>
				<view class="box">
					<uni-forms-item label="网关名称" required name="name">
						<uni-easyinput type="text" v-model="FormData.name" :clearable="false" placeholder="请输入网关名称" />
					</uni-forms-item>
					<uni-forms-item label="分组" required name="group_id">
						<picker @change="bindGroup" :range="group" range-key="group_name">
							<view class="picker-input">
								{{ FormData.group_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确认添加</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
const plugin = requirePlugin('ttLock');
export default {
	data() {
		return {
			gateway: {},
			FormData: {
				name: '',
				group_id: '',
				group_name: '',
				SSID: '',
				password: ''
			},
			group: [],
			rules: {
				SSID: {
					rules: [
						{
							required: true,
							errorMessage: '请选择WiFi'
						}
					],
					validateTrigger: 'submit'
				},
				password: {
					rules: [
						{
							required: true,
							errorMessage: '请填写WiFi密码'
						}
					],
					validateTrigger: 'submit'
				},
				name: {
					rules: [
						{
							required: true,
							errorMessage: '请填写网关名称'
						}
					],
					validateTrigger: 'submit'
				},
				group_id: {
					rules: [
						{
							required: true,
							errorMessage: '请选择分组'
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	onLoad(e) {
		this.gateway = JSON.parse(e.item);
		this.scanWifi();
		this.getGroup();
	},
	methods: {
		bindGroup(e) {
			this.FormData.group_id = this.group[e.detail.value].tt_group_id;
			this.FormData.group_name = this.group[e.detail.value].group_name;
		},
		chosewifi() {
			uni.navigateTo({
				url: '/pageA/gateway/wifi?item=' + JSON.stringify(this.gateway)
			});
		},
		wifiUpdate(obj) {
			this.FormData.SSID = obj.SSID;
			this.FormData.password = '';
		},
		submit() {
			this.$refs.form.validate().then((res) => {
				this.initGateway();
			});
		},
		initGateway() {
			uni.showLoading({
				title: '初始化中...'
			});
			const data = {
				id: '123',
				password: '123'
			};
			plugin
				.initGateway(
					this.gateway,
					{
						SSID: this.FormData.SSID,
						wifiPwd: this.FormData.password,
						uid: data.id,
						password: data.password,
						companyId: 0,
						branchId: 0,
						plugName: this.gateway.deviceName,
						server: 'plug.sciener.cn',
						port: 2999,
						useLocalIPAddress: false,
						useDHCP: true
					},
					(err) => {
						console.log('检测到设备断开连接（扫描WIFI)', err);
					}
				)
				.then((res) => {
					if (res.errorCode === 0) {
						console.log('初始化成功,开始同步服务器数据');
						uni.showLoading({
							title: '同步数据中...'
						});
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: '添加成功'
							});
						}, 1000);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.errorMsg
						});
					}
				});
		},
		scanWifi() {
			const _this = this;
			uni.startWifi({
				success() {
					uni.getConnectedWifi({
						success(res) {
							_this.FormData.SSID = res.wifi.SSID;
						}
					});
				}
			});
		},
		getGroup() {
			api.groupList({}).then((data) => {
				this.group = data.data;
			});
		}
	}
};
</script>
